<script lang="ts" setup>
import { reactive, ref } from "vue-demi";
import {
  heroOfChoice,
  getCurrentRunePage,
  deleteCurrentRunePage,
  setCurrentRunePage,
} from "@/axios/rune";
import { get101Runes } from "@/axios/get101Runes";
import { useGameStore } from "@/stores/Game";


let hero = reactive({
  champId: 1,
  label: "黑暗之女",
  alias: "Annie",
  title: "安妮",
});
let isLoading = ref(true);

// import { getRuneSrc } from "../utils/index";
const getRuneSrc = (id: any) => {
  // let data = await (window as any).rune.getHeroOfChoiceImg(id)
  // console.log('data',data)
  let data = `./runes/${id}.png`;
  return data;
};

// 选择的英雄头像
let heroImgSrc = ref("");
const setHeroImgSrc = (id: any) => {
  heroImgSrc.value = `https://game.gtimg.cn/images/lol/act/img/champion/${id}.png`;
};

type RunesT = [
  {
    // 英雄名称
    alias: string;
    pickCount: number;
    // 位置
    position: string;
    primaryStyleId: number;
    selectedPerkIds: any[];
  }
];

// 符文
let runes = reactive([
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
  {
    // 英雄名称
    alias: "Annie",

    pickCount: 32,
    // 位置
    position: "jungle",
    primaryStyleId: 8100,
    selectedPerkIds: [],
  },
]);

// 仓库
const gameStore = useGameStore();

const setRunes = async () => {
  // 获取当前选择的英雄
  let data = await heroOfChoice(gameStore.user.infoId);
  // 设置英雄数据
  if (hero) {
    // 设置英雄头像
    setHeroImgSrc(hero.alias);
    hero.label = data!.label;
    hero.champId = Number(data!.champId);
    hero.alias = data!.alias;
    hero.title = data!.title;
  }
  // 获取符文
  let rune = await get101Runes(hero!.champId);

  runes.length = 0;
  // for (let i = 0; i <= runes.length; i++) {
  //   runes.pop();
  // }
  for (let i = 0; i < rune.length; i++) {
    runes.push(rune[i]);
  }
};

setTimeout(async () => {
  // 获取符文
  let rune = await get101Runes(hero!.champId);

  runes.length = 0;
  // for (let i = 0; i <= runes.length; i++) {
  //   runes.pop();
  // }
  for (let i = 0; i < rune.length; i++) {
    runes.push(rune[i]);
  }
  await setRunes();
}, 0);

let cacheId = -1;

setInterval(async () => {
  // 获取当前选择的英雄
  let data = await heroOfChoice(gameStore.user.infoId);
  if (data && cacheId !== Number(data!.champId)) {
    await setRunes();
    cacheId = Number(data!.champId);
    isLoading.value = false;
  }
}, 500);

// 应用符文
const ApplicationOfRune = (rune: any) => {
  setTimeout(async () => {
    // 先获取当前符文页信息
    let currentRunePage = await getCurrentRunePage();
    // console.log('currentRunePage',currentRunePage)

    // 副系id
    currentRunePage.subStyleId = rune.subStyleId;
    // 主系id
    currentRunePage.primaryStyleId = rune.primaryStyleId;

    // 所有符文
    currentRunePage.selectedPerkIds = rune.selectedPerkIds;

    currentRunePage = JSON.parse(JSON.stringify(currentRunePage));
    // 符文页名称
    currentRunePage.name = `${hero.label}-${hero.title}`;

    // console.log("currentRunePage", currentRunePage);
    // 删除当前
    await deleteCurrentRunePage(currentRunePage.id);
    // 设置符文
    // await (window as any).rune.setCurrentRunePage(currentRunePage);
    await setCurrentRunePage(currentRunePage);
  }, 0);
};
</script>
<template>
  <main v-show="!isLoading">
    <!-- 头像 -->
    <div class="avatar">
      <el-avatar :size="50" :src="heroImgSrc" />
      <div class="text item">{{ hero.label }}-{{ hero.title }}</div>
    </div>
    <!-- 符文 -->
    <div class="item runeBox">
      <div class="runeCard" v-for="(rune, index) in runes" :key="index">
        <div class="rune">
          <div class="runeImgBox">
            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[0])" alt="" />
            </div>

            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[1])" alt="" />
            </div>

            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[2])" alt="" />
            </div>

            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[3])" alt="" />
            </div>

            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[4])" alt="" />
            </div>

            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[5])" alt="" />
            </div>

            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[6])" alt="" />
            </div>

            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[7])" alt="" />
            </div>

            <div class="item">
              <img :src="getRuneSrc(rune.selectedPerkIds[8])" alt="" />
            </div>
          </div>
          <el-button class="btn" @click="ApplicationOfRune(rune)"
            >应用</el-button
          >
        </div>
      </div>
    </div>
    <div class="item"></div>
  </main>
  <div v-show="isLoading">
    <el-result title="请选择你的英雄"> </el-result>
  </div>
</template>
<style lang="less" scoped>
main {
  display: flex;
  flex-direction: column;
  .avatar {
    margin-bottom: 20px;
  }
  .runeBox {
    .runeCard {
      // width: 90%;
      height: 60px;
      border: 1px solid linear-gradient(135deg, #17ead9, #6078ea);
      margin-bottom: 20px;
      position: relative;

      /* 设置容器尺寸 - 原理1 */
      // width: 400px;
      // height: 400px;
      /* 背景渐变色 - 原理2 */
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      /* 背景尺寸 - 原理3 */
      background-size: 600% 600%;
      /* 循环动画 - 原理4 */
      // animation: gradientBG 5s ease infinite;

      @keyframes gradientBG {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .rune {
        display: flex;
        flex-direction: row;
        // align-items: center;
        display: flex;
        align-items: stretch;

        .runeImgBox {
          // width: 50%;
          // height: 30vh;
          display: flex;
          flex-direction: rwo;
          justify-content: flex-start;
          align-items: center;
          .item {
            width: 10%;
            margin-left: 3px;

            // 第一个
            &:first-child {
              width: 20%;
            }

            // 副系第一个
            &:nth-child(5) {
              // width: 20%;
              margin-left: 10px;
            }
          }

          img {
            // margin-left: 20px;
            width: 100%;
          }
        }

        .btn {
          // text-align: center;
          // line-height: 60px;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
